<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图切换</title>
</head>
<body>
    <style type="text/css">
        .banner{
            position: relative;
        }
        .bannerImg{
            position: relative;
            height: 360px;
        }
        .bannerImg span{
            position: absolute;
            top:0;
            left: 0;
        }
        .bannerBtn{
            width: 200px;
            position:absolute;
            left:30%;
            bottom:-20px;
            text-align:center;
        }
        .bannerBtn li{
            list-style:none;
            border-radius: 50%;
            float:left;
         }
        .bannerBtn li a{
            display: block;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            margin: 5px;
            color:#FFFFFF;
            font-weight:bolder;
            text-decoration:none;
        } 
        .bannerBtn li a.aBtn{
            transition:all .6s ease;
        }
        .fade-enter-active, .fade-leave-active{
          transition: all 1s;
        }
        .fade-enter, .fade-leave-to{
          opacity: 0;
        }
        </style>
        <script src="./Vue.js"></script>
        </head>
        <body>
        <div id="box">
            <div class="banner">
                  <div class="bannerImg">
                    <transition-group name="fade" tag="div">
                          <span v-for="(v,i) in banners" :key="i" v-if="(i+1)==index?true:false">
                            <img src="./image/h.jpg">
                          </span>
                    </transition-group>
                  </div>
                  <ul class="bannerBtn">
                    <li v-for="num in 3">
                          <a href="javascript:;" :style="{background:num==index?'#ff9900':'#CCCCCC'}" @mouseover='change(num)' class='aBtn'>{{num}}</a>
                    </li>
                  </ul>
            </div>
        </div>
        <script type="text/javascript">
        var vm = new Vue({
            el : '#box',
            data : {
                banners : ['h.jpg','h.jpg','h.jpg'],
                index : 1,　　　　　　　
                flag : true,
                timer : '',　　　　
            },
            methods : {
                next : function(){
                    this.index = this.index + 1 == 4 ? 1 : this.index + 1;　  
                },
                change : function(num){
                    if(this.flag){　　　
                        this.flag = false;
                        setTimeout(()=>{
                            this.flag = true;
                        },1000);
                        this.index = num;　
                        clearTimeout(this.timer);
                        this.timer = setInterval(this.next,3000);
                    }
                }
            },
            mounted : function(){
                this.timer = setInterval(this.next,3000);
            }
        });
        </script>
        
</body>
</html>